<template>
  <el-aside width="sideWidth+'px'" style="background-color: rgb(255,255,255)"> <!--width="sideWidth+'px'"导航栏动态宽度-->
    <el-menu :default-openeds="['1', '2', '3']" style="min-height: 100%; overflow-x: hidden"
      background-color="rgb(48,65,86)" text-color="#fff" active-text-color="#ffd04b" :collapse-transition="false"
      :default-active="activeMenu" @select="handleSelect">
      <div style="height: 60px; line-height: 60px; text-align: center">
        <img src="../assets/logo.png" alt="" style="width: 30px;position: relative; top: 10px;margin-right: 10px">
        <b style="color: white" v-show="logoTextShow">后台管理系统</b>
      </div>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span slot="title">用户配置</span>
        </template>
        <el-menu-item-group>
          <router-link to="/userlist"><el-menu-item index="1-1">用户列表</el-menu-item></router-link>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-s-claim"></i>
          <span slot="title">任务管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/tasklist"><el-menu-item index="2-1">任务列表</el-menu-item></router-link>
          <!-- <router-link to="/taskDatalist"><el-menu-item index="2-2">查看任务数据</el-menu-item></router-link> -->
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-s-custom"></i>
          <span slot="title">公司管理</span>
        </template>
        <el-menu-item-group>
          <router-link to="/companylist"><el-menu-item index="3-1">公司列表</el-menu-item></router-link>
          <!-- <router-link to="/personnelList"><el-menu-item index="3-2">人员列表</el-menu-item></router-link> -->
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>
</template>

<script>

export default {
  name: 'left',
  data() {
    return {
      sideWidth: 200, //动态收缩导航栏初始值200
      logoTextShow: true,
      headerBg: 'headerBg',
      activeMenu: localStorage.getItem('key') || '1-1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log('选中左侧菜单')
      console.log(key)
      console.log(keyPath)
      this.activeMenu = ''+key+''
      console.log(this.activeMenu)
      localStorage.setItem('key',key)
    }
  }
}
</script>

<!--顶部的横栏颜色定义-->
<style>
.headerBg {
  background: #ccc !important;
}

.el-menu-item-group__title {
  padding: 0 0 0 0 !important;
}
</style>